html { height: 100%; }
body { background: red; display: -webkit-box;-webkit-box-orient: vertical;  margin: 0; padding: 0; font-family: Arial; font-size: 12px; color: #333; height: 100%; }
h1, h2, h3, h4, h5, h6, p, ul, li { padding: 0; margin: 0; }

/* Forms */
button { cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, from(#74bed1), to(#bfd7dd)); border-radius: 4px; border: 1px solid #bfd7dd; font-size: 10px; text-transform: uppercase; color: #333; padding: 3px 8px; margin: auto 3px; }
button:hover { color: #fff; }
button:clicked { background: red;  }
input { border: 1px solid #74bed1; border-radius: 4px; border: 1px solid #bfd7dd; font-size: 10px; text-transform: uppercase; color: #333; padding: 3px 8px; margin: auto 3px; }
label { padding: 3px 0; margin: auto 3px; }

/* HELPERS  */
.full-height { height: 100% !important; }
.flex1 { display: -webkit-box; -webkit-box-flex: 1; }
.flex2 { -webkit-box-flex: 2; }
.flex3 { -webkit-box-flex: 3; }
.flex4 { -webkit-box-flex: 4; }
.flex5 { -webkit-box-flex: 5; }
.flex6 { -webkit-box-flex: 6; }
.flex7 { -webkit-box-flex: 7; }
.flex8 { -webkit-box-flex: 8; }
.flex9 { -webkit-box-flex: 9; }
.pad-block { padding: 5px 11px; }

/* LAYOUT */
.ui-widget-header h3 { padding: 6px 11px; font-size: 14px; }
.ui-widget.center { margin: 0 auto; }
.ui-widget.small { width: 20%; }
.ui-widget.medium { width: 30%; }
.ui-widget.half { width: 50%; }
.ui-widget.big { width: 75%; }
.ui-widget.full { width: 100%; }

#navigation { width: 100%; }
.text-center { text-align: center; }

.layout-box { background: #f3f3f3; }
.layout-box.center { -webkit-box-pack: center; -webkit-box-align: center; } 

.layout-box, 
.layout { display: -webkit-box; -webkit-box-orient: horizontal; }
.vertical { -webkit-box-orient: vertical; }
.horizontal { -webkit-box-orient: horizontal; }
.layout-box.vertical .box { -webkit-box-orient: vertical; }

.layout-box .box { border: 2px solid #999; display: -webkit-box; border-radius: 8px; background: #fff; }
.layout-box .box .box-content { padding: 10px; }
.layout-box .box .box-title { padding: 6px 10px; border-top-left-radius: 6px; border-top-right-radius: 6px; font-size: 16px; text-shadow: #aaa 1px 1px 1px; color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#74bed1), to(#bfd7dd))}


/* LOGIN */
.login-box { width: 30%; height: auto !important; }
.login-box form label { display: -webkit-box; -webkit-box-flex: 1; }
.login-box form button { display: -webkit-box;-webkit-box-flex: 1; }
.login-box form input { display: -webkit-box;-webkit-box-flex: 100; }

/* INDEX */
.site-wrapper { background: red; height: 100%; }
.header-box {  -webkit-box-flex: 5; height: 50px; background: #f3f3f3; padding: 10px; }
.body-box { -webkit-box-flex: 80; height: 100%; background: url(../i/pois.gif); }
.menu-box { display: -webkit-box; -webkit-box-flex: 5; }
.content-box { display: -webkit-box; -webkit-box-flex: 80; background: red }
